<!DOCTYPE HTML>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>弹幕引擎Demo</title>
    <script src="//openbse.netlify.app/openbse.all.min.js"></script>
    <script>
        window.onload = function () {
            var versionInfo = openBSE.getVersion();
            document.getElementById("version").innerText = versionInfo.version;
            document.getElementById("buildDate").innerText = versionInfo.buildDate;
            window.specialEngine = new openBSE.SpecialEngine(document.getElementById('BulletScreensDiv'), {}, 'canvas');

            loadData(specialEngine);
            setInterval(showDebugInfo, 500);
        }
        var loadData = function (specialEngine) {
            specialEngine.add({
                text: '测试测试测试测试',
                startTime: 1000,
                endTime: 100000000,
                renderCode: 'setStyle({transform: "translate(100px,100px)rotate(" + Math.floor(time / 10) % 360 + "deg)"});'
            });
            specialEngine.add({
                text: '测试测试测试测试测试测试',
                startTime: 1000,
                endTime: 100000000,
                renderCode: 'setStyle({transform: "translate(200px,200px)rotate(" + (360 - Math.floor(time / 10) % 360) + "deg)"});'
            });
            specialEngine.add({
                text: '测试测试测试测',
                startTime: 1000,
                endTime: 100000000,
                renderCode: 'setStyle({transform: "translate(300px,300px)rotate(" + (360 - Math.floor(time) % 360) + "deg)"});'
            });
            specialEngine.add({
                text: '测试',
                startTime: 1000,
                endTime: 100000000,
                renderCode: 'setStyle({text:"测试" + Math.floor(time / 500) % 500, transform: "translate(" + Math.floor(time / 10) % 500 + "px," + (500 - Math.floor(time / 100) % 500) + "px)"});'
            });
            specialEngine.add({
                text: '测试',
                startTime: 1000,
                endTime: 100000000,
                renderCode: 'setStyle({text:"测试" + Math.floor(time / 500) % 500, transform: "translate(" + (500 - Math.floor(time / 10) % 500) + "px," + Math.floor(time / 100) % 500 + "px)"});'
            });
            specialEngine.add({
                text: 'AAAAAAAAAAAAAAAAAAAAAAAAAA',
                startTime: 1000,
                endTime: 100000000,
                renderCode: 'setStyle({text: Math.floor(time / 1000) % 2 == 1 ? "AAAAAAAAAAAAAAAAAAAAAAAAAA" : "", transform: "translate(350px, 450px)"});'
            });
        }
        var showDebugInfo = function () {
            var debugInfo = specialEngine.debugInfo;
            document.getElementById("time").innerText = debugInfo.time.toString();
            document.getElementById("delay").innerText = debugInfo.delay.toString();
            document.getElementById("fps").innerText = debugInfo.fps.toString();
            document.getElementById("BulletScreensOnScreenCount").innerText = debugInfo.realTimeBulletScreenCount.toString();
            document.getElementById("BulletScreensCount").innerText = debugInfo.bufferBulletScreenCount.toString();
            document.getElementById("delayBulletScreensCount").innerText = debugInfo.delayBulletScreenCount.toString();
        }
        function set(key, value) {
            var object = {};
            object[key] = value;
            specialEngine.options = object;
        }
    </script>
</head>

<body>
    <p style="font-size: 70%">引擎版本：<b id="version"></b>&nbsp;构建时间：<b id="buildDate"></b></p>
    <div style="width:936px;height:526.5px;position:relative;">
        <div style="left:0;top:0;right:0;bottom:0;position:absolute;background:url(./images/background.jpg);background-size: 100%;"></div>
        <div id="BulletScreensDiv" style="left:0;top:0;right:0;bottom:0;position:absolute;"></div>
    </div>
    <p>时间：<b id="time"></b> fps：<b id="fps"></b></p>
    <p>实时弹幕数：<b id="BulletScreensOnScreenCount"></b>&nbsp;缓冲区弹幕数：<b id="BulletScreensCount"></b></p>
    <p>延迟：<b id="delay"></b>ms 延迟丢弃丢弃弹幕数：<b id="delayBulletScreensCount"></b></p>
    <a href="#" onclick="specialEngine.play();">开始</a>&nbsp;<a href="#" onclick="specialEngine.pause();">暂停</a>&nbsp;<a
        href="#" onclick="specialEngine.stop();">停止</a>&nbsp;
    <a href="#" onclick="specialEngine.visibility = true;">显示弹幕</a>&nbsp;<a href="#" onclick="specialEngine.visibility = false;">隐藏弹幕</a>&nbsp;
    <a href="#" onclick="specialEngine.cleanBuffer();loadData(generalEngine);">重新加载弹幕</a>&nbsp;<a
        href="#" onclick="specialEngine.cleanScreen();">清空屏幕</a>&nbsp;<br>
    <a href="#" onclick="set('playSpeed', 1);">1倍速</a>&nbsp;<a href="#" onclick="set('playSpeed', 1.5);">1.5倍数</a>&nbsp;
    <a href="#" onclick="set('playSpeed', 2);">2倍速</a>&nbsp;<a href="#" onclick="set('playSpeed', 2.5);">2.5倍数</a>&nbsp;
    <a href="#" onclick="set('scaling', 1);">1倍缩放</a>&nbsp;<a href="#" onclick="set('scaling', 1.5);">1.5倍缩放</a>&nbsp;
    <a href="#" onclick="set('scaling', 2);">2倍缩放</a>&nbsp;<a href="#" onclick="set('scaling', 0.75);">0.75倍缩放</a>&nbsp;<br>
    <a href="#" onclick="set('opacity', 0);">100%透明</a>&nbsp;<a href="#" onclick="set('opacity', 0.25);">75%透明</a>&nbsp;
    <a href="#" onclick="set('opacity', 0.5);">50%透明</a>&nbsp;<a href="#" onclick="set('opacity', 0.75);">25%透明</a>&nbsp;
    <a href="#" onclick="set('opacity', 1);">不透明</a>
    <div id="contextmenu" style="padding:3px;width:120px;height:19px;position:fixed;border:1px solid black;background:rgba(255, 255, 255, 0.9);font-size: 13px;display:none;cursor: default;">上下文菜单</div>
</body>

</html>